.workspace-split:not(.mod-right-split) .workspace-tabs {
  background: transparent;
  box-shadow: inset -10px 0 4px -10px rgb(0, 0, 0, 0.04);
}

.nav-files-container {
  @include vertical-scroll-shadow(var(--shade-5-opaque));

  .theme-dark & {
    @include vertical-scroll-shadow(var(--shade-5-opaque), 0.5);
  }

  .is-mobile &,
  .is-translucent &,
  .workspace-fake-target-overlay & {
    background: none !important;
  }
}

.nav-folder.mod-root > .nav-folder-title .nav-folder-title-content {
  border-radius: 0;
  color: transparent;
  overflow: hidden;
  height: 0px;
  padding: 3px 0;
}

.nav-file-title,
.nav-folder-title {
  font-size: var(--ui-font-size);
  color: var(--text-normal);
  border: none;
  font-weight: var(--medium-weight);
  line-height: 1;
  padding: 0 5px;
  border-radius: var(--radius-s);
  align-items: center;

  .nav-folder.mod-root > & {
    font-size: var(--ui-font-size);
    font-weight: var(--bold-weight);
    border-radius: 0;
  }

  body:not(.is-grabbing) &:hover .nav-folder-collapse-indicator,
  body:not(.is-grabbing) &:hover {
    background: transparent;
  }

  .nav-file.is-active > &,
  .nav-folder.is-active > & {
    background-color: var(--shade-plus-darker);
  }
}

.nav-file-title {
  align-items: center;
  justify-content: flex-end;
  flex-direction: row-reverse;

  &.is-being-dragged,
  &.is-active,
  body:not(.is-grabbing) &.is-active:hover {
    background-color: var(--shade-plus-darker);
    color: var(--text-normal);
  }
}

.nav-folder-title {
  padding-right: 10px;

  &.is-being-dragged-over {
    background-color: hsl(var(--accent-hsl));
    color: var(--text-on-accent);

    .nav-folder-collapse-indicator > svg {
      color: var(--text-on-accent);
    }
  }
}

.nav-file-title-content,
.nav-folder-title-content {
  padding: 4px 0;
  border: none;
  line-height: 1.3;
  border-radius: 0;

  &.is-being-renamed {
    @include radius-s;

    background-color: var(--background-primary);
    box-shadow: inset 0 0 0 3px var(--shade-50-opaque);
    padding: 4px;

    &::before {
      display: none !important;
    }
  }
}

.nav-folder-title-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding-left: 4px;

  .nav-folder.mod-root > .nav-folder-title.is-being-dragged-over & {
    box-shadow: inset 0 -3px hsl(var(--accent-hsl));
  }
}

.nav-folder-children {
  padding: 0;

  .nav-folder:not(.mod-root) > & {
    padding-left: 5px;
  }

  & > .nav-folder {
    padding: 0 0 0 5px;
  }
}

.nav-folder-collapse-indicator {
  flex-grow: 0;
  flex-shrink: 0;
  width: auto;
  margin: 0 -2px 0 0;
}

.nav-file {
  border: none;
  padding: 0 5px 0 19px;
}

.nav-file-tag {
  line-height: 1;
  padding: 3px;
  background-color: var(--shade-5);
  letter-spacing: 0;
}

// Style setting
.cc-truncated-explorer-titles {
  .nav-files-container {
    overflow-x: hidden;
  }

  .nav-file-title,
  .nav-folder-title {
    width: 100%;
    white-space: normal;
    display: flex;
  }

  .nav-file-title-content,
  .nav-folder-title-content {
    display: inline-block;
    width: 100%;

    &:not(.is-being-renamed) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }

  &:not(.cc-no-folder-icons) .nav-folder-title-content::before {
    top: 0.15em;
  }
}

// Style setting
.cc-wrapped-explorer-titles {
  .nav-files-container {
    overflow-x: hidden;
  }

  .nav-file-title,
  .nav-folder-title {
    width: 100%;
    white-space: normal;
    display: flex;
  }

  .nav-file-title-content,
  .nav-folder-title-content {
    width: 100%;
    white-space: normal;
    display: flex;
    align-items: flex-start;
  }

  &:not(.cc-no-folder-icons) .nav-file-title-content::before,
  &:not(.cc-no-folder-icons) .nav-folder-title-content::before {
    top: 0;
  }
}

// Style setting
.cc-show-vault-name {
  .nav-folder.mod-root > .nav-folder-title .nav-folder-title-content {
    color: inherit;
    overflow: visible;
    height: unset;
    padding: 4px;
  }
}

.workspace-leaf.mod-active {
  .nav-folder.has-focus > .nav-folder-title,
  .nav-file.has-focus {
    border-radius: var(--radius-s);
    border: none;
    background-color: transparent;
  }

  .nav-folder.has-focus > .nav-folder-title,
  .nav-file.has-focus .nav-file-title {
    box-shadow: inset 0 0 0 2px var(--shade-30-opaque);
  }
}
